<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="src/index.css">
    <title>大众</title>
</head>
<body>
    <div class="page no-select icenterX" id="page" v-cloak>
        <div class="bg-view icenterX">
            <div class="bg-inner-view noselect">
                <img src="images/bg.png" >
            </div>
        </div>
        <div class="page-inner noselect">
            <div class="banner-view ishow">
                <img src="images/banner.png" >
            </div>
            <div class="title-view ishow">
                <img src="images/title.png" >
            </div>
            <div class="btn-view ishow" @click="toMask(mask.nowName)">
                <img src="images/btn.png" >
            </div>
            <div class="details-view ishow">
                <div class="head-view"></div>
                <div class="image-list">
                    <img v-for="t,i in 1" src="./images/details/img1.png" alt="">
                </div>
            </div>
        </div>
        <div class="mask-box no-select icenterY" v-show="mask.show" @touchmove.prevent>
            <div class="bg-view ishow" @click="toMask(false)"></div>
            <div class="inner-view icenterX">
                <div class="form-view icenterX bounceInDown" style="animation-duration:0.5s" v-show="mask.nowName=='form'" data-name="form">
                    <div class="title">在线报名</div>
                    <div class="info-view">
                        <div class="input-view" v-for="t,i in formData">
                            <div class="title must">{{t.name}}</div>
                            <input v-if="t.type=='input'" type="text" v-model="t.value" :placeholder="t.tips||'请输入'">
                            <div v-if="t.type=='choose'" class="choose">
                                <span :class="{vice:!t.value}">{{t.value||"请选择"}}</span>
                                <select v-model="t.value">
                                    <option v-for="ts,indexs in t.list" :value="ts[t.key]||ts.name">{{ts[t.key]||ts.name}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="agree-view icenterY" @click="agreeInfo=!agreeInfo">
                        <div class="icon iconfont" :class="{'icon-duoxuanjinyongzhuangtai':agreeInfo,'icon-duoxuan3':!agreeInfo}"></div>
                        <div class="text">我同意<span style="color: #379aff;" @click.stop="toMask('agrees')">《个人信息授权书》</span></div>
                    </div>
                    <div class="btn" @click="toSubmit('game')">立即提交</div>
                </div>
                <div class="agrees-view ishow icenterX" v-show="mask.nowName=='agrees'" data-name="agrees">
                    <h2 style="margin-bottom: 20px;">{{'个人信息授权书'}}</h2>
                    <p>{{agreeText}}</p>
                    <div class="btn" @click="toAgree">我同意</div>
                </div>
                <div class="game-view ishow" v-show="mask.nowName=='game'" data-name="game">
                    <div class="close-btn iconfont icon-guanbi" @click="toMask(false)"></div>
                    <div class="bg-view">
                        <img src="./images/game-style/bg.png" alt="">
                    </div>
                    <div class="score-board iline ibetween">
                        <div class="icenterX" style="color: #ffcc00;">
                            <div class="name">获得红包</div>
                            <div class="num">{{gameConfig.nowGiftNum}}</div>
                        </div>
                        <div class="icenterX">
                            <div class="name">游戏时间</div>
                            <div class="num">{{parsiInt(gameConfig.nowTime)}}</div>
                        </div>
                        <div></div>
                    </div>
                    <div class="cont-view">
                        <div class="start-btn" @click="toGameStart"
                         v-show="gameConfig.btnSatrt"
                         :class="{zoomOut:gameConfig.btnSatrtStyle}"
                        >{{startBtn(gameConfig.readyNum)}}</div>
                        <div class="gift-list" :style="'padding: 0 '+gameConfig.padding+'px;'">
                            <div class="gift"
                             v-for="t,i in gameConfig.giftList" :key="i"
                             v-show="t.show"
                             :class="{istart:mask.show,istop:!mask.show}"
                             :style="'width:'+gameConfig.giftTypeList[t.style].width+'px;animation: islip '+(gameConfig.dropTime/gameConfig.giftTypeList[t.style].speed)+'s linear;left: '+t.left+'px;transform: rotateZ('+t.zAngle+'deg) scale('+t.size+');'"
                             @click="getGift(i)"
                            >
                                <img :src="gameConfig.giftTypeList[t.style].imgUrl">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="over-view ishow icenterX" v-show="mask.nowName=='over'" data-name="over">
                    <div class="close-btn iconfont icon-guanbi" @click="toMask(false)"></div>
                    <div class="bg-view"></div>
                    <div class="title">游戏结束</div>
                    <div class="title">一共获得<span style="color: #ffcc00">{{gameConfig.nowGiftNum}}</span>个红包！</div>
                    <div class="info-view icenterX">
                        <div class="title">恭喜你获奖了</div>
                        <div class="vice">哇，你真的运气超好呢~</div>
                        <div class="ticket">
                            <img v-for="t,i in ticketList" :src="t.imgUrl" @click="toCard(i)">
                        </div>
                    </div>
                    <div class="vice igapt">本活动最终解释权归上汽大众中南分销中心所有，</div>
                    <div class="vice">本券不兑换现金，每券使用仅限一张。</div>
                </div>
                <div class="card-view ishow icenterX" v-show="mask.nowName=='card'" data-name="card">
                    <div class="close-btn iconfont icon-guanbi" @click="toMask(false)"></div>
                    <img class="head-img" :src="ticketList[nowCard].simgUrl">
                    <div style="color: #fff;font-size: 0.8rem;margin-top: 1rem;letter-spacing: 2px;">长按图片保存此券</div>
                </div>
            </div>
        </div>
    </div>
    <script src="lib/jquery/1.9.1/jquery.min.js"></script>
    <script src="lib/vue/vue.min.js"></script>
    <script src="lib/layer_mobile/layer.js"></script>
    <script src="src/index.js"></script>
</body>
</html>